<template>
  <div class="form-single-fragment" style="position: relative">
    <div class="task-title">
      <div>
        <span class="text">会议室申请</span>
        <el-tag effect="dark" size="mini" type="success"
          >当前节点：查看详情</el-tag
        >
        <!-- <el-tag  effect="dark" size="mini" type="info">{{'发起人：'}}</el-tag> -->
      </div>
    </div>
    <el-radio-group v-model="tab" size="mini" style="margin-bottom: 15px">
      <el-radio-button label="表单信息"></el-radio-button>
      <el-radio-button label="流程图"></el-radio-button>
      <el-radio-button label="审批记录"></el-radio-button>
    </el-radio-group>
    <div v-show="tab === '表单信息'">
      <el-form
        ref="info"
        :model="info"
        class="full-width-input"
        style="width: 100%"
        label-width="120px"
        size="mini"
        label-position="right"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label='会议室名称'>{{info.roomName}}</el-form-item>
            <el-form-item label="申请时间">{{info.applyDate}}</el-form-item>
            <el-form-item label="开始时间">{{info.startTime}}</el-form-item>
            <el-form-item label="结束时间">{{info.endTime}}</el-form-item>
            <el-form-item label="申请原因">{{info.remark}}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div v-show="tab === '流程图'">
      <ProcessViewer
        :style="{ height: getMainContextHeight - 148 + 'px' }"
        :xml="entryXml"
        :finishedInfo="finishedInfo"
        :allCommentList="tableList"
      />
    </div>
    <div v-show="tab === '审批记录'">
      <el-table
        size="mini"
        header-cell-class-name="table-header-gray"
        ref="tableImpl"
        :data="tableList"
      >
        <el-table-column
          label="序号"
          header-align="center"
          align="center"
          type="index"
          width="55px"
        />
        <el-table-column label="流程环节" prop="taskName" />
        <el-table-column label="执行人" prop="createUsername"></el-table-column>
        <el-table-column label="操作" prop="approvalType">
          <!-- <template slot-scope="{ row }">
            {{ row.masterData.leaveBeginTime }}
          </template> -->
        </el-table-column>
        <el-table-column label="审批意见" prop="comment"></el-table-column>
        <el-table-column label="处理时间" width="180px" prop="createTime" />
      </el-table>
    </div>
    <label class="page-close-box">
      <el-button type="text" @click="onClose" icon="el-icon-close"></el-button>
    </label>
  </div>
</template>

<script>
import { MeetRoom } from '@/api/approve.js';
import { mapActions, mapGetters } from 'vuex';
import ProcessViewer from '@/views/workflow/components/ProcessViewer.vue';
/* eslint-disable-next-line */
import { findTreeNode, findTreeNodePath, findItemFromList } from '@/utils';
/* eslint-disable-next-line */
/* eslint-disable-next-line */
import { DropdownWidget } from '@/utils/widget.js';
// import flowMixins from '../../mixins/flowMixins.js';
/* eslint-disable-next-line */
import { uploadMixin, statsDateRangeMixin } from '@/core/mixins';
/* eslint-disable-next-line */
import { FieldFlowController, DictionaryController } from '@/api';
import { FlowOperationController} from '@/api/flowController.js';

export default {
  name: 'formFlowCard',
  data () {
    return {
      info: {},
      tab: '表单信息',
      entryXml: null,
      tableList: [],
      finishedInfo: null,
      fileList: [],
      textarea: '',
      // 保存草稿后返回的taskId
      draftTaskId: undefined,
      // 保存草稿后返回的流程实例ID
      draftProcessInstanceId: undefined,
      formFlowField: {
        formFilter: {},
        formFilterCopy: {},
        clockIn: {
          impl: new DropdownWidget(this.loadClockInDropdownList)
        },
        isInit: false
      }
    }
  },
  components: {
    ProcessViewer
  },
  computed: {
    ...mapGetters(['getMainContextHeight'])
  },
  methods: {
    // 关闭当前页面按钮
    onClose () {
      this.$router.go(-1)
    },
    // 获取详情数据
    onViewTaskClick () {
      let params = {
        processInstanceId: this.$route.query.processInstanceId
      }
      MeetRoom.detail(this, params)
        .then((res) => {
          if (res.data) {
            this.info = res.data
          }
        })
        .catch((e) => {})
    },
    // 审批记录
    getRecords () {
      console.log('----------', this.$route.query)
      FlowOperationController.listFlowTaskComment(this, {
        processInstanceId: this.$route.query.processInstanceId
      }).then((res) => {
        this.tableList = res.data;
      });
    },
    // 流程图
    getProcessBpmn () {
      FlowOperationController.viewProcessBpmn(this, {
        processDefinitionId: this.$route.query.processDefinitionId
      }).then((res) => {
        this.entryXml = res.data;
      });
    },
    // 流程图高亮内容
    getViewHighlightFlowData () {
      FlowOperationController.viewHighlightFlowData(this, {
        processInstanceId: this.$route.query.processInstanceId
      }).then((res) => {
        this.finishedInfo = res.data;
      });
    },
    
    /**
     * 更新补卡申请
     */
    refreshFormFlowField (reloadData = false) {
      if (!this.formFlowField.isInit) {
        // 初始化下拉数据
      }
      this.formFlowField.isInit = true;
    },
    ...mapActions(['reloadMessage'])
  },
  mounted () {
    // 初始化页面数据
    this.onViewTaskClick()
    this.getRecords();
    this.getProcessBpmn();
    this.getViewHighlightFlowData();
  }
};
</script>
<style scoped>
.task-title {
  display: flex;
  justify-content: space-between;
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: 3px solid #409eff;
}
.task-title .text {
  height: 28px;
  line-height: 28px;
  font-weight: 600;
  font-size: 16px;
  color: #383838;
}
.task-title .el-tag {
  margin-left: 10px;
}
.traval_submit{
  text-align: right;
}
.submit {
  padding: 9px 15px;
  font-size: 12px;
  border-radius: 3px;
  margin-bottom: 10px;
}

</style>
